{% extends "base.html" %}
{% load static %}
{% block title %}关于我们 - 风之宿{% endblock %}

{% block content %}
<!-- 页面头部 -->
<section class="py-16 bg-primary/10">
  <div class="container mx-auto px-4">
    <div class="text-center">
      <h1 class="text-4xl font-serif font-bold text-primary mb-4">关于我们</h1>
      <p class="text-xl text-gray-600 max-w-3xl mx-auto">
        {% if page_contents %}{{ page_contents.main_content }}{% else %}风之宿创立于1998年，位于风景秀丽的山区，是一家秉承传统日式待客之道的精品旅馆。{% endif %}
      </p>
    </div>
  </div>
</section>

<!-- 主要介绍 -->
<section class="py-16 bg-white">
  <div class="container mx-auto px-4">
    <div class="flex flex-col lg:flex-row items-center gap-12">
      <div class="lg:w-1/2">
        <img src="{% static 'images/facility.jpg' %}" alt="风之宿外观" class="w-full rounded-lg shadow-lg">
      </div>
      <div class="lg:w-1/2">
        <h2 class="text-3xl font-serif font-bold text-primary mb-6">我们的故事</h2>
        <div class="space-y-4 text-gray-700 leading-relaxed">
          <p>
            风之宿创立于1998年，由传统日式建筑改造而成，坐落在风景如画的山区。
            我们致力于保护并发扬日本传统住宿文化，为来自世界各地的旅客提供纯正的日式住宿体验。
          </p>
          <p>
            我们的名字"风之宿"寓意着如同山风般清新自然的住宿环境，让每一位客人
            都能在这里找到内心的宁静与平和。
          </p>
          <p>
            二十多年来，我们始终坚持使用当地食材，传承传统工艺，让客人在享受现代化
            舒适设施的同时，也能感受到深厚的文化底蕴。
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- 我们的理念 -->
<section class="py-16 bg-neutral">
  <div class="container mx-auto px-4">
    <div class="text-center mb-12">
      <h2 class="text-3xl font-serif font-bold text-primary">我们的理念</h2>
      <p class="text-xl text-gray-600 mt-4">传统与现代的完美融合</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <div class="text-center">
        <div class="w-20 h-20 bg-primary rounded-full flex items-center justify-center mx-auto mb-4">
          <i class="fa fa-heart text-white text-2xl"></i>
        </div>
        <h3 class="text-xl font-semibold text-primary mb-3">贴心服务</h3>
        <p class="text-gray-600">
          我们相信真正的款待来自于内心的关怀。从您踏入风之宿的那一刻起，
          我们就会用心关注每一个细节，确保您的住宿体验完美无缺。
        </p>
      </div>

      <div class="text-center">
        <div class="w-20 h-20 bg-primary rounded-full flex items-center justify-center mx-auto mb-4">
          <i class="fa fa-leaf text-white text-2xl"></i>
        </div>
        <h3 class="text-xl font-semibold text-primary mb-3">自然和谐</h3>
        <p class="text-gray-600">
          我们尊重大自然，坚持可持续发展。使用当地有机食材，
          减少环境负担，让您在与自然和谐共处的环境中放松身心。
        </p>
      </div>

      <div class="text-center">
        <div class="w-20 h-20 bg-primary rounded-full flex items-center justify-center mx-auto mb-4">
          <i class="fa fa-history text-white text-2xl"></i>
        </div>
        <h3 class="text-xl font-semibold text-primary mb-3">文化传承</h3>
        <p class="text-gray-600">
          我们致力于保护和传承日本传统文化。从建筑风格到餐饮服务，
          每一个细节都体现了我们对传统文化的尊重和热爱。
        </p>
      </div>
    </div>
  </div>
</section>

<!-- 团队介绍 -->
<section class="py-16 bg-white">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-serif font-bold text-primary text-center mb-12">我们的团队</h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
      <div class="text-center">
        <img src="{% static 'images/p4.jpg' %}" alt="山田太郎" class="w-32 h-32 rounded-full mx-auto mb-4 object-cover">
        <h3 class="text-xl font-semibold text-primary">山田太郎</h3>
        <p class="text-gray-600 mb-2">创始人兼总经理</p>
        <p class="text-sm text-gray-500">
          拥有30年酒店管理经验，致力于为客人提供最地道的日式住宿体验。
        </p>
      </div>

      <div class="text-center">
        <img src="{% static 'images/p3.webp' %}" alt="铃木花子" class="w-32 h-32 rounded-full mx-auto mb-4 object-cover">
        <h3 class="text-xl font-semibold text-primary">铃木花子</h3>
        <p class="text-gray-600 mb-2">主厨</p>
        <p class="text-sm text-gray-500">
          传统怀石料理大师，擅长运用时令食材创作令人难忘的美食体验。
        </p>
      </div>

      <div class="text-center">
        <img src="{% static 'images/p2.jpg' %}" alt="佐藤健一" class="w-32 h-32 rounded-full mx-auto mb-4 object-cover">
        <h3 class="text-xl font-semibold text-primary">佐藤健一</h3>
        <p class="text-gray-600 mb-2">客房服务经理</p>
        <p class="text-sm text-gray-500">
          专注于细节，确保每一位客人都能享受到完美无缺的客房服务。
        </p>
      </div>

      <div class="text-center">
        <img src="{% static 'images/p1.png' %}" alt="高桥优美" class="w-32 h-32 rounded-full mx-auto mb-4 object-cover">
        <h3 class="text-xl font-semibold text-primary">高桥优美</h3>
        <p class="text-gray-600 mb-2">文化活动协调员</p>
        <p class="text-sm text-gray-500">
          组织各类传统文化体验活动，让客人深入了解日本文化。
        </p>
      </div>
    </div>
  </div>
</section>

<!-- 荣誉奖项 -->
<section class="py-16 bg-neutral">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-serif font-bold text-primary text-center mb-12">荣誉与奖项</h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <div class="bg-white rounded-lg p-6 text-center shadow-md">
        <div class="text-4xl text-yellow-500 mb-4">🏆</div>
        <h3 class="text-xl font-semibold text-primary mb-2">日本优秀旅馆奖</h3>
        <p class="text-gray-600">2022年</p>
        <p class="text-sm text-gray-500 mt-2">表彰我们在传统住宿文化保护方面的杰出贡献</p>
      </div>

      <div class="bg-white rounded-lg p-6 text-center shadow-md">
        <div class="text-4xl text-yellow-500 mb-4">⭐</div>
        <h3 class="text-xl font-semibold text-primary mb-2">五星级评价</h3>
        <p class="text-gray-600">2021-2023年</p>
        <p class="text-sm text-gray-500 mt-2">连续三年获得旅游网站用户的五星级评价</p>
      </div>

      <div class="bg-white rounded-lg p-6 text-center shadow-md">
        <div class="text-4xl text-yellow-500 mb-4">🍽️</div>
        <h3 class="text-xl font-semibold text-primary mb-2">美食卓越奖</h3>
        <p class="text-gray-600">2020年</p>
        <p class="text-sm text-gray-500 mt-2">我们的怀石料理获得美食评论家的高度评价</p>
      </div>
    </div>
  </div>
</section>

<!-- 联系我们CTA -->
<section class="py-16 bg-primary text-white">
  <div class="container mx-auto px-4 text-center">
    <h2 class="text-3xl font-serif font-bold mb-4">想要了解更多？</h2>
    <p class="text-xl mb-8 max-w-2xl mx-auto">
      我们随时准备为您解答任何问题，帮助您规划完美的风之宿体验。
    </p>
    <a href="{% url 'contact' %}" class="bg-white text-primary px-8 py-3 rounded-lg hover:bg-gray-100 transition-all text-lg font-semibold inline-block">
      联系我们
    </a>
  </div>
</section>
{% endblock %}